<template>
	<VScaleScreen width="1920" height="1080">
		<div class="back-ground-img w-full h-full px-5 pb-5 box-border flex flex-col">
			<header class="flex flex-row justify-between h-fit">
				<div class="logo h-[36px] my-auto ml-2 w-[200px]"><img src="./assets/logo.svg" alt="" class="w-fit h-full" /></div>
				<div class="title h-[64px]"><img src="./assets/组45.svg" alt="" class="w-full h-full" /></div>
				<div class="time flex flex-row text-white my-auto mr-4 justify-between w-[200px]">
					<div>
						<div class="text-[20px]">{{ time }}</div>
						<div class="text-[14px]">
							{{ new Date().getFullYear() + "/" + (new Date().getMonth() + 1) + "/" + new Date().getDate() }}
						</div>
					</div>
					<div class="w-[12px] h-[36px]"><img src="./assets/路径10.svg" alt="" class="w-full h-full" /></div>
					<div class="w-[36px] h-[36px]"><img src="./assets/组46.svg" alt="" class="w-full h-full" /></div>
					<div>
						<div>-2° ~ 5°</div>
						<div>晴</div>
					</div>
				</div>
			</header>
			<div class="h-full w-full flex pb-3">
				<div class="left w-1/4 h-full">
					<device-online-rate />
					<alarm-distribution />
					<equipment-status-statistics />
				</div>

				<div class="center w-1/2 flex flex-col h-full">
					<div class="w-full h-2/3"><img src="./assets/model_factory.webp" class="w-full h-full object-contain" /></div>
					<temperature-display class="flex-1 w-full h-1/3" />
				</div>
				<div class="right w-1/4 h-full">
					<alarm-trend />
					<video-surveillance />
					<event-list />
				</div>
			</div>
		</div>
	</VScaleScreen>
</template>

<script setup lang="ts">
import DeviceOnlineRate from "./deviceOnlineRate.vue";
import AlarmDistribution from "./AlarmDistribution.vue";
import EquipmentStatusStatistics from "./EquipmentStatusStatistics.vue";
import VideoSurveillance from "./VideoSurveillance.vue";
import TemperatureDisplay from "./TemperatureDisplay.vue";
import EventList from "./EventList.vue";
import AlarmTrend from "./AlarmTrend.vue";
import { onBeforeMount, ref } from "vue";
import VScaleScreen from "v-scale-screen";

const time = ref("");
const date = ref<Date>();
onBeforeMount(() => {
	setInterval(() => {
		date.value = new Date();
		time.value = date.value.getHours() + ":" + date.value.getMinutes() + ":" + date.value.getSeconds();
	}, 1000);
});
</script>

<style scoped lang="scss"></style>
